import React, { Component, Suspense } from 'react';
import { Switch, Route, Redirect } from "react-router-dom";
import loading from '../assets/2.jpeg'
class RouterView extends Component {
    render() {
        let { routes } = this.props;
        //过滤路由表中的 普通路由
        let normalRoutes = routes.filter((item) => {
            return item.path && item.component;
        })
        //过滤路由表中的 重定向路由
        let redirectRoutes = routes.filter((item) => {
            return item.redirect;
        })
        //过滤路由表中的 404路由
        let notfoundRoutes = routes.filter((item) => {
            return item.component && !item.path;
        })
        return (
            <Suspense fallback={<img className='com_loading' src={loading} alt="" />}>
                <Switch>
                    {/* 普通路由规则 */}
                    {
                        normalRoutes.map((item, index) => {
                            return (
                                <Route key={index} exact={item.exact || false} path={item.path} render={(props) => {
                                    if (item.children && item.children.length > 0) {//有子路由
                                        //必须将props进一步传给路由组件，避免props中的属性丢失
                                        return <item.component {...props} routes={item.children}></item.component>
                                    } else {//没有子路由
                                        return <item.component {...props}></item.component>
                                    }

                                }}></Route>
                            )
                        })
                    }
                    {/* 重定向路由规则 */}
                    {
                        redirectRoutes.map((item, index) => {
                            return (
                                <Redirect key={index} exact from={item.from} to={item.to}></Redirect>
                            )
                        })
                    }
                    {/* 404路由规则 */}
                    {
                        notfoundRoutes.map((item, index) => {
                            return (
                                <Route key={index} component={item.component}></Route>
                            )
                        })
                    }

                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;